﻿<%@ Page Language="C#" Inherits="PageBase" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>菜单管理</title>
    <link href="../js/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../js/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="../css/default.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../js/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        var me = {
            datagrid1: null,
            edit_form: null,
            edit_window: null,
            search_form: null,
            search_window: null,
            tree1: null,
            idFiled: 'MenuID',
            actionUrl: '../ashx/SysMenu.ashx'
        };

        $(function () {
            pageInit();
            loadTree();
            loadGrid();
        });

        function pageInit() {
            me.edit_window = $('#edit_window');
            me.edit_form = me.edit_window.find('#edit_form');
            me.search_window = $('#search_window');
            me.search_form = me.search_window.find('#search_form');
            me.tree1 = $('#tree1');
            me.datagrid1 = $('#datagrid1');

            $('#btn_edit_ok').linkbutton().click(function () { SaveData(); });
            $('#btn_search_ok').linkbutton().click(function () { me.datagrid1.datagrid({ pageNumber: 1 }); });
            $('#btn_edit_cancel').linkbutton().click(function () { me.edit_window.window('close'); });
            $('#btn_search_cancel').linkbutton().click(function () { me.search_window.window('close'); });
        }

        //加载树
        function loadTree() {
            me.tree1.tree({
                url: me.actionUrl + '?Method=Tree',
                onClick: function (node) {
                    if (node.id == 0) {
                        me.edit_form.find('#ParentID').val(node.id);
                        me.edit_form.find('#Level').val(1);
                        me.edit_form.find('#LevelPath').val(node.id + '.');
                        me.edit_form.find('#State').attr('checked', true);
                    } else {
                        me.edit_form.find('#ParentID').val(node.id);
                        me.edit_form.find('#Level').val(parseInt(node.attributes['Level']) + 1);
                        me.edit_form.find('#LevelPath').val(node.attributes['LevelPath'] + node.id + '.');
                        me.edit_form.find('#State').attr('checked', true);
                    }
                    me.datagrid1.datagrid('reload');

                },
                onLoadSuccess: function (node, param) {
                    var selectedNode = $(this).tree('find', me.edit_form.find('#ParentID').val());
                    if (selectedNode) $(this).tree('select', selectedNode.target);
                }
            });
        }

        //加载列表
        function loadGrid() {
            me.datagrid1.datagrid({
                sortName: 'FSort',
                idField: me.idFiled,
                url: me.actionUrl + '?Method=List',
                frozenColumns: [[

	                { field: 'opt', title: '操作', width: 100, align: 'center', formatter: function (val, rec, index) {
	                    var strReturn = '';
	                    
	                    strReturn = '<a href="javascript:void(0)" class="l-btn-text icon-search" title="绑定功能"  onclick="SetMenuFun(' + rec[me.idFiled] + ')"  style="padding-left:20px;" >绑定功能</a>';
	                    
	                    return strReturn;
	                }
	                }
                ,
               
                {field: 'State', title: '状态', width: 60, sortable: true, align: 'center', formatter: function (value, rowData, rowIndex) {
                    var strReturn = '';
                    if (value == '1') {
                        strReturn = '<a href="javascript:void(0)" class="l-btn-text icon-ok" title="点击改变状态"  onClick="AddOrUpdate(\'updateState\',' + rowData[me.idFiled] + ',0);" style="padding-left:20px;height:20px;" ></a>';
                    } else {
                        strReturn = '<a href="javascript:void(0)" class="l-btn-text icon-useless"  title="点击改变状态" onClick="AddOrUpdate(\'updateState\',' + rowData[me.idFiled] + ',1);" style="padding-left:20px;height:20px;"></a>';
                    }
                    return strReturn;
                }
            }
            
				]],
            columns: [[
                  { field: 'Name', title: '名称', width: 120, sortable: true, align: 'center' },
                  { field: 'Code', title: '编码', width: 100, sortable: true, align: 'center' },
                  { field: 'Url', title: 'URL路径', width: 300, sortable: true, align: 'left' }, 
                  { field: 'Level', title: '菜单层级', width: 60, sortable: true, align: 'center' },
                  { field: 'LevelPath', title: '层级路径', width: 100, sortable: true, align: 'center' },
                  { field: 'ChildCount', title: '子菜单个数', width: 40, sortable: true, align: 'center' },
                  { field: 'FSort', title: '排序', width: 40, sortable: true, align: 'center' }
                ]],
            toolbar: ['-'
            
                , { text: '新增', iconCls: 'icon-add', handler: function () { AddOrUpdate('add'); } }, '-'
            
                , { text: '修改', iconCls: 'icon-edit', handler: function () { AddOrUpdate('update'); } }, '-'
           
                , { text: '删除', iconCls: 'icon-remove', handler: function () { var ids = []; var rows = me.datagrid1.datagrid('getSelections'); if (rows.length == 0) { showError('请选择一条记录进行操作!'); } else { for (var i = 0; i < rows.length; i++) { ids.push(rows[i][me.idFiled]); } Delete(ids.join(',')); } } }, '-'
           
                 , { text: '查看', iconCls: 'icon-search', handler: function () { AddOrUpdate('view'); } }, '-'
            
                 , { text: '查找', iconCls: 'icon-search', handler: function () { me.search_window.window('open'); } }, '-'
            
                ],
            onBeforeLoad: function (param) {
                param.ParentID = me.edit_form.find('#ParentID').val();
                me.search_form.find('input').each(function (index) { param[this.name] = $(this).val(); });
            }
        });
    }

    function AddOrUpdate(action) {

        switch (action) {
            case 'add':
                $('#MenuID').val('0');
                me.edit_form.find('#State').attr('checked', true);
                me.edit_form.find('#Name,#Code,#Url').val('');

                me.edit_window.find('div[region="south"]').css('display', 'block');
                me.edit_window.window('open');
                break;
            case 'updateState':
                $.ajax({
                    url: me.actionUrl + '?Method=UpdateState',
                    data: { MenuID: arguments[1], State: arguments[2] },
                    success: function (returnData) {
                        if (returnData) {
                            if (returnData.isOk == 1) {
                                me.datagrid1.datagrid('reload');
                            } else {
                                showError(returnData.message);
                            }
                        }
                    }
                });
                break;
            case 'update':
                var selectedRows = me.datagrid1.datagrid('getSelections');
                if (selectedRows.length > 0) {
                    $.ajax({
                        url: me.actionUrl + '?Method=AddOrUpdate&MenuID=' + selectedRows[0][me.idFiled],
                        success: function (data) {
                            me.edit_form.form('load', data);
                        }
                    });
                    me.edit_window.find('div[region="south"]').css('display', 'block');
                    me.edit_window.window('open');
                } else {
                    showError('请选择一条记录进行操作!');
                    return;
                }
                break;
            case 'view':
                var selectedRows = me.datagrid1.datagrid('getSelections');
                if (selectedRows.length > 0) {
                    $.ajax({
                        url: me.actionUrl + '?Method=AddOrUpdate&MenuID=' + selectedRows[0][me.idFiled],
                        success: function (data) {
                            me.edit_form.form('load', data);
                        }
                    });
                    me.edit_window.find('div[region="south"]').css('display', 'none');
                    me.edit_window.window('open');
                } else {
                    showError('请选择一条记录进行操作!');
                    return;
                }
                break;
        }
    }

    function SaveData() {
        if (me.edit_form.form('validate')) {
            $.ajax({
                url: me.actionUrl + '?Method=Save',
                data: me.edit_form.serialize(),
                success: function (returnData) {
                    if (returnData) {
                        if (returnData.isOk == 1) {
                            showInfo(returnData.message);
                            me.datagrid1.datagrid('reload');
                            me.tree1.tree('reload');
                        } else {
                            showError(returnData.message);
                        }
                    }
                }
            });
        }
    }

    function Delete(ids) {
        $.messager.confirm('提示信息', '确认要删除选择项？【' + ids + '】', function (isClickedOk) {
            if (isClickedOk) {
                $.ajax({
                    url: me.actionUrl,
                    data: { Method: 'Delete', ids: ids },
                    success: function (returnData) {
                        if (returnData) {
                            if (returnData.isOk == 1) {
                                showInfo(returnData.message);
                                me.datagrid1.datagrid('reload');
                                me.tree1.tree('reload');
                            } else {
                                showError(returnData.message);
                            }
                        }
                    }
                });
            }
        })
    }

    //=================================设置功能开始
    function SetMenuFun(MenuID) {
        $('#menu_window_datagrid').datagrid({
            sortName: "DictID",
            idField: "MenuFunID",
            pagination: false,
            url: '../ashx/SysMenuFun.ashx?Method=ListByMenu&state=1',
            queryParams: { MenuID: MenuID },
            columns: [[
                  { field: 'DictID', title: '功能ID', width: 60, sortable: true, align: 'center' },
                  { field: 'Name', title: '功能名', width: 100, sortable: true, align: 'center' },
                  { field: 'Code', title: '功能编码', width: 100, sortable: true, align: 'center' },
                  { field: 'MenuFunID', title: '绑定功能', width: 60, sortable: true, align: 'center', formatter: function (value, rowData, rowIndex) {
                      var strReturn = '';
                      var MenuFunID = rowData['MenuFunID'] == '' ? 0 : rowData['MenuFunID'];
                      var FunID = rowData['DictID'];
                      if (MenuFunID) {
                          strReturn = '<a href="javascript:void(0)" style="display:block;width:16px;height:16px;" class="l-btn-text icon-ok" title="点击取消绑定功能"  onClick="UpdateState(' + MenuFunID + ',' + FunID + ',' + MenuID + ');" style="padding-left:20px;" ></a>';
                      } else {
                          strReturn = '<a href="javascript:void(0)" style="display:block;width:16px;height:16px;" class="l-btn-text icon-useless"  title="点击绑定功能" onClick="UpdateState(' + MenuFunID + ',' + FunID + ',' + MenuID + ');" style="padding-left:20px;" ></a>';
                      }
                      return strReturn;
                  }
                  }
                ]]
        });
        $('#menu_window').window({ title: "绑定菜单功能" }).window('open');
    }
    //提交操作
    function UpdateState(MenuFunID, FunID, MenuID) {
        $.ajax({
            url: '../ashx/SysMenuFun.ashx?Method=Save',
            data: { MenuFunID: MenuFunID, MenuID: MenuID, FunID: FunID },
            success: function (returnData) {
                if (returnData) {
                    if (returnData.isOk == 1) {
                        $('#menu_window_datagrid').datagrid('reload');
                    } else {
                        showError(returnData.message);
                    }
                }
            }
        });
    }

    </script>
</head>
<body class="easyui-layout">
    <noscript>
        <div style="position: absolute; z-index: 100000; height: 2046px; top: 0px; left: 0px;
            width: 100%; text-align: center;">
            <img src="../images/noscript.gif" alt='抱歉，请开启脚本支持！' />
        </div>
    </noscript>
    <div region="west" hide="true" split="true" title="导航树" style="width: 180px;">
        <ul id="tree1">
        </ul>
    </div>
    <div title="数据列表" region="center" border="false">
        <table id="datagrid1">
        </table>
    </div>
    <div id="edit_window" class="easyui-window" closed="true" title="数据维护窗口" style="width: 500px;
        height: 400px; padding: 5px;">
        <div class="easyui-layout" fit="true">
            <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form id="edit_form" name="edit_form" method="post">
                <div title="隐藏参数">
                    <input type="hidden" id="MenuID" name="MenuID" value="0" />
                </div>
                <table cellpadding="3" align="center">
                    <tr>
                        <td>
                            URL：
                        </td>
                        <td>
                            <input id="Url" name="Url" value="" class="easyui-validatebox" required="true" maxlength="200"
                                style="width: 250px;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            编码：
                        </td>
                        <td>
                            <input id="Code" name="Code" type="text" class="easyui-validatebox" required="true"
                                maxlength="30" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            名称：
                        </td>
                        <td>
                            <input id="Name" name="Name" type="text" class="easyui-validatebox" required="true"
                                maxlength="30" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            状态：
                        </td>
                        <td align="left">
                            <input type="checkbox" id="State" name="State" value="1" checked="checked" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            父ID：
                        </td>
                        <td>
                            <input id="ParentID" name="ParentID" class="easyui-numberbox" min="0" style="width: 50px;"
                                reuired="true" maxlength="20" value="0" />
                            排序：
                            <input id="FSort" name="FSort" class="easyui-numberbox" min="0" style="width: 50px;"
                                reuired="true" maxlength="20" value="0" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            层级：
                        </td>
                        <td>
                            <input id="Level" name="Level" class="easyui-numberbox" min="1" reuired="true" style="width: 50px;"
                                maxlength="10" value="1" />
                            <input id="LevelPath" name="LevelPath" class="easyui-validatebox" reuired="true"
                                maxlength="50" value="0." />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            备注：
                        </td>
                        <td>
                            <textarea id="Remark" name="Remark" cols="40" class="easyui-validatebox" validtype="length[0,200]"
                                rows="3"></textarea>
                        </td>
                    </tr>
                </table>
                </form>
            </div>
            <div region="south" border="false" style="text-align: center; height: 30px; line-height: 30px;">
                <a id="btn_edit_ok" icon="icon-save" href="javascript:void(0)">确定</a> <a id="btn_edit_cancel"
                    icon="icon-cancel" href="javascript:void(0)">关闭</a>
            </div>
        </div>
    </div>
    <div id="search_window" class="easyui-window" closed="true" title="查询窗口" style="width: 350px;
        height: 200px; padding: 5px;">
        <div class="easyui-layout" fit="true">
            <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form id="search_form" method="post">
                <table>
                    <tr>
                        <td>
                            名称：
                        </td>
                        <td>
                            <input name="Name" id="Name" style="width: 150px;" />
                        </td>
                    </tr>
                </table>
                </form>
            </div>
            <div region="south" border="false" style="text-align: center; height: 30px; line-height: 30px;">
                <a href="javascript:void(0)" id="btn_search_ok" icon="icon-ok">确定</a> <a href="javascript:void(0)"
                    id="btn_search_cancel" icon="icon-cancel">关闭</a>
            </div>
        </div>
    </div>
    <div id="menu_window" class="easyui-window" closed="true" title="设置功能" style="width: 400px;
        height: 400px;">
        <table id="menu_window_datagrid">
        </table>
    </div>
</body>
</html>
